import React from 'react'
import { Observer } from 'mobx-react-lite'
import { useStore } from '@/stores'
import './index.less'
import { Button } from 'antd'
import { useNavigate } from 'react-router-dom'

const Header: React.FC = () => {
  const { common } = useStore();
  const navigate = useNavigate();
  const logout = async () => {
    sessionStorage.setItem('token', '');
    await navigate("/login");
  };

  return (
    <Observer>
      {() => (
        <div className='header'>
          <div className='contentHeader'>管理系统</div>
          <div style={{ width: " 200px" }}><Button className='contentHeaderBtn' type='primary' onClick={logout}>退出</Button></div>
        </div>
      )}
    </Observer>
  )
}

export default Header